<template>
  <div class="container">

    <div class="login-wrapper">
      <div class="header">Login</div>
      <div class="form-wrapper">
        <h1>用户登录</h1>
        <div class="input-item">
          <p>输入账号：<input v-model="username" placeholder="用户名/邮箱/手机号"></p>
        </div>
        <div class="input-item">
          
          <p>输入密码：<input v-model="password" type="password" placeholder="密码"></p>
        </div>
        <div class="captcha-group">
          <input v-model="code" class="captcha-input" placeholder="验证码">
          <img :src="captcha" class="captcha-image" @click="refreshCaptcha">
        </div>
        <div class="checkbox">
          <input type="checkbox" id="remember" v-model="checked" @change="handleCheckChange">
          <label for="remember">下次自动登录</label>
        </div>
        <div class="botton1">
          <button @click="login" class="button1">登录</button>
          <router-link to="/register" style="font-size: 10px;">没有账号？</router-link>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped>

html {
    height: 100%;
}
body {
    height: 100%;
}
.container {
    /* margin-top: 5%; */
    height: 980px;
    width: 100%;
    background: image(src);
   
    background-image: linear-gradient(to right, #424242, #c9c9c9);
    
}
.login-wrapper {
    background-color: #fff;
    width: 358px;
    height: 600px;
    border-radius: 15px;
    padding: 0 50px;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    background: #fff;
    border-radius: 10px;
    box-shadow: 0px 0px 10px rgba(0,0,0,0.1);
}
.header {
    font-size: 38px;
    font-weight: bold;
    text-align: center;
    line-height: 150px;
}
.input-item {
    display: block;
    width: 100%;
    margin-bottom: 20px;
    border: 0;
    padding: 10px;
    border-bottom: 1px solid rgb(128, 125, 125);
    font-size: 15px;
    outline: none;
}
.input-item:placeholder {
    text-transform: uppercase;
    
}
.btn {
    text-align: center;
    padding: 10px;
    margin: 0 auto;
    width: 100%;
    margin-top: 40px;
    background-image: linear-gradient(to right, #ffffff, #ffffff);
    
}
.msg {
    text-align: center;
    line-height: 88px;
}
a {
    text-decoration-line: none;
    color: #abc1ee;
}




h1 {
  margin-bottom: 10px;
  font-size: 24px;
  color: #333;
}

.input-group {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
}

input {
  padding: 10px;
  border: 1px solid #ccc; 
  border-radius: 4px;
  font-size: 14px;
}

.captcha-group {
  display: flex;
  margin-bottom: 10px;
  position:relative;
  margin-left: 93px;
}

.captcha-input { 
  align-self: flex-start; 
  margin-right: 10px;
}

.captcha-image {
  white-space: nowrap;
  margin-left: 10px;
  
}

/* button {
  width: 120px;
  padding: 10px;
  background-color: rgb(153, 198, 68);
  border: none;
  border-radius: 4px;
  font-size: 14px;
  color: #fff;
  cursor: pointer;
} */
.button1 {
  width: 120px;
  padding: 10px;
  background-color: rgb(119, 152, 243);
  border: none;
  border-radius: 4px;
  font-size: 14px;
  color: #0e0e0e;
  cursor: pointer;
  margin-top: 20px;
  margin-left: 25%;
}

button:hover {
  background-color: #a8a8a9; 
}
</style>
<script>
import { ref } from 'vue'
import axios from 'axios'
import { useRouter } from 'vue-router'

export default {
  setup() {
    const router = useRouter()
    const username = ref('')
    const password = ref('')
    const code = ref('')
    const captcha = ref('')
    const realCode = ref('')
    const checked = ref(false)

    function getRandomCode() {
      let code = ''
      const codeChars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789'

      for (let i = 0; i < 4; i++) {
        code += codeChars.charAt(Math.floor(Math.random() * codeChars.length))
      }

      return code
    }

    function genCaptcha() {
      const code = getRandomCode()
      captcha.value = code
      realCode.value = code

      const canvas = document.createElement('canvas')
      canvas.width = 100
      canvas.height = 30

      const context = canvas.getContext('2d')
      context.font = 'bold 26px Arial'
      context.fillText(code, 15, 25)

      return canvas.toDataURL()
    }

    function refreshCaptcha() {
      captcha.value = genCaptcha()
    }

    function login() {
      if (code.value.toUpperCase() === realCode.value.toUpperCase()) {
      // 如果验证码正确，则发送用户名和密码到服务器进行验证
      const params = new URLSearchParams({
        username: username.value,
        password: password.value,
        code: ''.value,
      }).toString();

            axios
            .post('http://localhost:5000/login', {
              username: username.value,
              password: password.value,
            })
            .then(response => {
              if (response.data === "yes") {
                console.log('登录成功')
                router.push('/welcome');
                if (checked.value) {
                  localStorage.setItem('username', username.value);
                  localStorage.setItem('password', password.value);
                }
              } else {
                alert('登录失败：用户名或密码不正确');
              }

            })
            .catch(error => {
              // 如果登录失败（例如用户名或密码不正确）
              console.log('登录失败');
              console.error(error);
            });
      } else {
        // 验证码错误
        alert('验证码错误')
        console.log(realCode.value)
      }
    }


    function handleCheckChange(e) {
      checked.value = e.target.checked
      if (checked.value) {
        localStorage.setItem('username', username.value)
        localStorage.setItem('password', password.value)
      } else {
        localStorage.removeItem('username')
        localStorage.removeItem('password')
      }
    }

    captcha.value = genCaptcha()
    if (localStorage.getItem('username')) {
      username.value = localStorage.getItem('username')
      password.value = localStorage.getItem('password')
      checked.value = true
    }

    return {
      username,
      password,
      code,
      captcha,
      checked,
      refreshCaptcha,
      login,
      handleCheckChange,
    }
  },
}
</script>